<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>HTML文档类型</title>
<link rel="stylesheet" href="../css/reset.css" type="text/css" />
<link rel="stylesheet" href="../css/prettify.css" type="text/css" />
<script type="text/javascript" src="../js/prettify.js"></script>
</head>

<body onload="prettyPrint()">
<h1> WP文章缩略图使用详解</h1>
<hr />
<pre class="prettyprint linenums">
add_custom_image_header( '', 'twentyten_admin_header_style' );

</pre>
<p>上一篇文章介绍了WordPress 3.0新默认主题twentyten中一个有趣的功能：<a title="调用文章缩略图作WP头部图片" href="http://csspod.com/archives/featured-image-in-wordpress-3">使用用文章缩略图作为头部图片</a>。本文译自WordPress开发成员<a href="http://twitter.com/markjaquith">Mark Jaquith</a>写的<a href="http://markjaquith.wordpress.com/2009/12/23/new-in-wordpress-2-9-post-thumbnail-images/">New in WordPress 2.9: Post Thumbnail Images</a>，介绍缩略图的设置和调用。</p>
<h3>以下为译文</h3>
<p>许多WordPress主题使用图片代表每篇文章，特别是一些杂志般布局的。图片可能只在首页显示，可能是独立的，或者放在摘要旁边。迄今为止，并没有标准化的方法来实现这个功能。很多主题需要用户冗长乏味的在自定义域中输入图片URL，图片通常需要手动裁切。从WordPress 2.9开始，主题作者可以轻松地开启缩略图选择界面，然后使用简单的<br />
	模板标签调用图片。</p>
<figure id="attachment_54" class="wp-caption aligncenter"><a href="http://static.csspod.com/images/2010/08/Featured_Image_in_WordPress_3.0.jpg"><img title="Featured_Image_in_WordPress_3.0" src="./images/Featured_Image_in_WordPress_3.0.gif" alt="Featured_Image_in_WordPress_3" width="300" height="120" /></a>
	<figcaption class="wp-caption-text">WP3中的特色图片</figcaption>
</figure>
<p>首先，在主题的<code>functions.php</code>中声明该主题支持缩略图功能，这将开启WP管理后台中的缩略图设置界面。</p>
<pre class="prettyprint linenums"> 
add_theme_support( 'post-thumbnails' );
</pre>
<p>上面的代码将在文章（Post）和页面（Page）两种内容模型中都开启缩略图选择界面，如果只想选择其一，可以添加参数：</p>
<pre class="prettyprint linenums"> 
add_theme_support( 'post-thumbnails', array( 'post' ) ); // Add it for posts
add_theme_support( 'post-thumbnails', array( 'page' ) ); // Add it for pages
</pre>
<p>添加所需的行到<code>functions.php</code>中即可。</p>
<p>下一步，指定缩略图尺寸，共有两个选项：等比例缩放和裁切。等比例缩放就是例如一张100×50图片，设定的大小为50×50，则此图片会被缩放成50×25。这种方式的好处是整张图片都能显示，缺点是生成的图片大小不一，有时是限宽的，有时是限高的。如果想把图片限定在某个宽度、高度不限的话，可以指定宽度，再指定一个绝不可能达到的高度，如99999。</p>
<pre class="prettyprint linenums"> 
set_post_thumbnail_size( 50, 50 ); // 50 pixels wide by 50 pixels tall, box resize mode
</pre>
<p>在第二个选项裁切模式中，图片将被裁切成匹配目标的纵横比，然后在精确地缩放至指定尺寸。好处是生成的图片大小一致，缺点是图片将被裁切（或从左右两边，或从上下）以适合目标尺寸的纵横比，被裁掉的部份无法显示在缩略图中。</p>
<pre class="prettyprint linenums"> 
set_post_thumbnail_size( 50, 50, true ); // 50 pixels wide by 50 pixels tall, hard crop mode
</pre>
<p>现在可以利用模板函数在主题中显示这些图片，这些函数应放到主循环中（<strong>译者注：</strong>作者根据2.9撰写此文，根据3.0默认主题的代码来看，不在主循环内也能使用这些函数调用缩略图）。</p>
<p><code>has_post_thumbnail()</code>返回布尔值，表明当前文章是否有手动选的缩略图：</p>
<pre class="prettyprint linenums"> 
&lt;?php
    if ( has_post_thumbnail() ) {
	// the current post has a thumbnail
    } else {
	the current post lacks a thumbnail
    }
?&gt;
</pre>
<p><code>the_post_thumbnail()</code>如果存在缩略图则输出缩略图：</p>
<pre class="prettyprint linenums"> 
&lt;?php the_post_thumbnail(); ?&gt;
</pre>
<p>这些是最基本用法，下面是一些高级用法。</p>
<p>假设你想在首页使用50×50硬裁切（hard-cropped）的缩略图，而在文章的永久链接页面使用400像素宽（不限高）的缩略图，指定额外的自定义尺寸即可，代码如下：</p>
<p><code>functions.php</code></p>
<pre class="prettyprint linenums"> 
add_theme_support( 'post-thumbnails' );
 
set_post_thumbnail_size( 50, 50, true ); // Normal post thumbnails
 
add_image_size( 'single-post-thumbnail', 400, 9999 ); // Permalink thumbnail size
</pre>
<p><code>home.php</code>或者<code>index.php</code>的代码，取决于主题结构：</p>
<pre class="prettyprint linenums"> 
&lt;?php the_post_thumbnail(); ?&gt;
</pre>
<p><code>single.php</code>代码：</p>
<pre class="prettyprint linenums"> 
&lt;?php the_post_thumbnail( 'single-post-thumbnail' ); ?&gt;
</pre>
<p><code>set_post_thumbnail_size()</code>仅仅调用<code>add_image_size( 'post-thumbnail' )</code>——默认的文章缩略图"句柄"，但正如你所见可以添加额外的句柄来调用<code>add_image_size( $handle, $width, $height, {$hard_crop_switch} );</code>，使用的时候区分句柄即可<code>the_post_thumbnail( $handle );</code></p>
<p>如果想要主题支持更早的WordPress版本，需要用<code>function_exists()</code>来阻止早期版本调用这些新函数：</p>
<pre class="prettyprint linenums"> 
if ( function_exists( 'add_theme_support' ) ) { // Added since 2.9
    add_theme_support( 'post-thumbnails' );
    set_post_thumbnail_size( 50, 50, true ); // Normal post thumbnails
    add_image_size( 'single-post-thumbnail', 400, 9999 ); // Permalink thumbnail size
}
</pre>
<p>警告：WordPress 2.9这个功能仅仅对新上传的图片有效，还不能对已存在图片调整大小，我正在考虑在未来版本中实现它（译者注：WordPress 3.0已经可以调整？）。如果你先前上传了缩略图，然后重新声明一个新的尺寸，那么在调用模板函数时将不能对这些先前上传的缩略图硬裁切，等比例缩放也将在浏览器中完成。作为临时的解决方案，Viper007Bond开发了一个插件回溯和创建丢失的缩略图尺寸：<a title="http://wordpress.org/extend/plugins/regenerate-thumbnails/" href="http://wordpress.org/extend/plugins/regenerate-thumbnails/">Regenerate Thumbnails</a>。</p>
</html>
